import event from './event'
import art from './art_template'
/**
 * 页面模块的默认数据
 */
function uuid(name = "block") {
    return name + "_" + new Date().getTime();
}

/**
 * 组件的基础类
 */
class Element {
    /**
     * 显示在左侧的时候的名称
     */
    static label = "未命名"
    //组件id
    id = "";
    /**
     * 样式
     */
    class_name = "elem_box";
    /**
     * 模板数据
     */
    data = {};
    /**
     * 模板,
     * 支持es6获取数据,
     * 支持模板语法获取data中数据,
     * 默认渲染,位置,字体颜色,字体大小
     */
    tmpl = "";
    attr = {
        x: 0,
        y: 0,
        zIndex: 0,
        color: "#333",
        fontSize: "12px",
    }

    /**
     * 渲染方法
     */
    render() {
        return `<div id="${this.id}" 
                style="
                    left:${this.attr.x}px;
                    top:${this.attr.y}px;
                    color:${this.attr.color};
                    fontSize:${this.attr.fontSize};
                    " 
                class="${this.class_name}">${this.compire()}</div>`;
    }
    compire() {
        if (!this.tmpl) return "";
        return art.render(this.tmpl, this.data);
    }
    created() {}
    actived = false;
    /**
     * 选中状态
     */
    active() {
        this.cancel();
        $("#" + this.id).addClass("active").append("<div class='del_btn'>删除</div>");
        $("#" + this.id).on("click", ".del_btn", function (e) {
            event.emit("del_elem", this.parentNode.id);
        })
    }
    /**
     * 取消选中
     */
    cancel() {
        $("#" + this.id).removeClass("active");
        $(".del_btn", "#" + this.id).remove();
    }
    offset = {
        x: 0,
        y: 0,
        zIndex: 0
    }
    /**
     * 开始移动
     * @param {*} e 
     */
    start_move(e) {
        this.offset.x = e.pageX;
        this.offset.y = e.pageY;
        $("#" + this.id).css({
            zIndex: 999
        });
    }
    /**
     * 结束移动
     */
    end_move() {
        $("#" + this.id).css({
            zIndex: this.attr.zIndex
        });
    }
    /**
     * 移动
     * @param {*} e 
     */
    move(e) {
        let moveX = e.pageX - this.offset.x;
        let moveY = e.pageY - this.offset.y;
        this.attr.x += moveX;
        this.attr.y += moveY;
        this.offset.x = e.pageX;
        this.offset.y = e.pageY;
        $("#" + this.id).css({
            left: this.attr.x + "px",
            top: this.attr.y + "px",
        });
    }

}
let elems = [];

let modules = new Map();
let website = $("#website");

export default {
    //注册元件的方法
    //注册的同时加入到左侧列表中
    reg(obj) {
        elems.push(obj);
    },
    //初始化,将组件加入左侧列表
    init() {
        //加入元件
        this.elem_init();
        //点击事件
        this.elem_click();
        //添加监听事件
        event.on("add_elem", this.add_elem);
        event.on("cancel_elem", this.cancel_elem);
        event.on("del_elem", this.del_elem.bind(this));
        event.on("refresh", this.refresh.bind(this));
        //容器内添加
        this.website_click();

        //全局点击事件
        $(document).click(function (e) {
            let isAt = false;
            let filter_list = ["website", "contls", "header"];
            e.originalEvent.path.forEach(item => {
                if (filter_list.indexOf(item.id) >= 0) {
                    isAt = true;
                }
            })
            if (!isAt) {
                //点击到了外部区域
                event.emit("cancel_elem");
            }
        });
    },
    /**
     * 重新渲染页面
     */
    refresh(id) {
        let html = "";
        if (id) {
            let t = modules.get(id);
            if (t) {
                html = t.compire();
                $("#" + id).html(html);
            } else {
                $("#" + id).remove();
            }
        } else {
            modules.forEach((item) => {
                html += item.render();
            });
            website.html(html);
        }
    },
    //组件的基本类
    Element: Element,
    elem_box: null,
    //初始化类
    elem_init() {
        this.elem_box = $("#contls");
        this.elem_box.empty();
        elems.forEach((com, index) => {
            this.elem_box.append("<div class='component' data-index='" + index + "'>" + com.label + "</div>");
        });
    },
    //点击初始化一个新的内容
    elem_click() {
        this.elem_box.on("click", ".component", function () {
            let index = $(this).data("index") || 0;
            let c_module = elems[index];
            if (c_module) {
                let obj = new c_module();
                obj.id = uuid(c_module.name);
                modules.set(obj.id, obj);
                event.emit("add_elem", obj.id);
            }
        })
    },
    /**
     * 添加了一个组件到列表
     * @param {*} index 已添加组件的序号
     */
    add_elem(id) {
        let obj = modules.get(id);
        let html = obj.render();
        website.append(html);
        obj.created();
    },
    /**
     * 点击外部区域取消选中
     */
    cancel_elem() {
        modules.forEach(item => {
            item.cancel();
        })
    },
    /**
     * 删除显示的节点
     * @param {*} id 
     */
    del_elem(id) {
        modules.delete(id);
        this.refresh(id);
    },
    /**
     * 添加点击事件
     */
    website_click() {
        website.on("mousedown", ".elem", function (e) {
            modules.forEach(item => {
                if (item.id === this.parentNode.id) {
                    item.active();
                    item.actived = true;
                    item.start_move(e);
                } else {
                    item.cancel();
                }
            })
        });
        website.on("mousemove", function (e) {
            modules.forEach(item => {
                if (item.actived) {
                    item.move(e);
                }
            })
        });
        website.on("mouseup", ".elem_box", function (e) {
            let obj = modules.get(this.id);
            obj.actived = false;
            obj.end_move();
        });
    }
}